﻿<!doctype html>
<html>
<head>
<#include "/part_meta.ftl">
<title>订单结算-迈小众</title>
<link href="${st.resDomain}/css/style.css" rel="stylesheet" type="text/css">
<link href="${st.resDomain}/css/store.css" rel="stylesheet" type="text/css">
<link href="${st.resDomain}/css/autostyle.css" rel="stylesheet" type="text/css">
<link href="${st.resDomain}/css/cart.css" rel="stylesheet" type="text/css">
<style>
body {
	background-color: #EAF0F2;
}
</style>
</head>

<body>
<!--头部-->
<header>
  <div class="boxw store">
    <div class="header">
      <span class="f_left"><a href="javascript:history.back();" class="back"></a></span>
      <span class="title">订单结算</span>
      <span class="f_right"><a class="more"></a></span>
    </div>
    <div class="more">
      <a href="${st.userDomain}/shoppingCart" class="icon-car">购物车</a>
      <a href="${st.userDomain}/" class="icon-user">个人中心</a>
      <a href="${st.domain}/" class="icon-home">主页</a>
    </div>
  </div>
</header>
<!--头部 END-->

<div id="order" class="main boxw" style="padding-bottom: 3.5rem;">
 <div class="order">
 <form id="add_form" method="post" action="${st.userDomain}/order/addDo">
  <div class="box" id="defAddress">
    <#if address??> 
     <h2>收货人信息</h2>
     <h3>${address.consignee}</h3>
     <p>${address.mobile}</p>
     <p>${address.regionName}${address.street}</p>
    <#else>
     <a href="javascript:;" class="btn" id="addAddressBt" >创建收货地址</a>
    </#if>
  </div>
  <input type="hidden" id="addressId" name="addressId" value="${address.addressId}"/>
 <#list cartList as cart> 
  <div class="box" id="cart_${cart.store.storeId}">
    <input type="hidden" name="orders[${cart_index}].store.storeId" value="${cart.store.storeId}">
    <h2>${cart.store.name}</h2>
    <p class="f_clear">
     <label>支付方式： </label>
     <input type="hidden" name="orders[${cart_index}].payId" id="pay_${cart.store.storeId}"/>
      <#list pay as pay>
       <a name="checkWeek" class="checkbox" id="payT_${cart.store.storeId}_${pay.catId}"></a><span>${pay.name}</span>
      </#list>
    </p>
    <p class="f_clear">
     <label>配送方式： </label>
     <input type="hidden" name="orders[${cart_index}].deliveryId" id="delivery_${cart.store.storeId}"/>
      <#list delivery as delivery>
       <a name="checkWeek" class="checkbox" id="del_${cart.store.storeId}_${delivery.catId}"></a><span>${delivery.name}</span>
      </#list>
    </p>
    <p><a href="javascript:alert('缺少页面');" class="goodslist">${cart.shoppings?size}种商品，总计：￥<span id="sgExtens_${cart.store.storeId}"></span>，点击查看</a></p>
    <!-- 遍历购物车商品，计算订单商品小计 -->
    <#list cart.shoppings as s>
     <div id="shopping_data_${cart.store.storeId}_${s.shoppingId}" style="display:none;">
      ${s.shoppingId}|${s.buyCount}|${s.storeGoods.price}|${s.storeGoods.atDiscount}|${s.storeGoods.unit}|${s.storeGoods.sellUnit}|${s.storeGoods.unitConvert}|
     </div>
     <input type="hidden" name="orders[${cart_index}].shoppingIds" value="${s.shoppingId}">
    </#list>
    <!-- 遍历购物车商品，计算订单商品小计 end-->
    <p>备注：限 45 个字</p>
    <p>
      <textarea name="orders[${cart_index}].remark" data-maxsize="45" style="height:2rem;" ></textarea>
    </p>
  </div>
 </#list>
  <div class="box total">
    <p style="display:none;">
      <label>订单金额： </label>
      <span>￥100.00</span></p>
    <p>
      <label>优惠： </label>
      <span>￥0.00</span></p>
    <p>
      <label>运费： </label>
      <span>￥0.00</span></p>
    <p>
      <label>应付金额： </label>
      <span class="price">￥<strong id="totalMoney">0</strong></span></p>
  </div>
  </div>
 </form> 
</div>
<!--tj-->
<div class="tj">
  <div class="boxw">
    <div><a href="javascript:;" class="btn" id="orderAddDoBt">提交订单</a></div>
  </div>
</div>
<!--tj end-->
<!-- 新增收货人信息 -->
<div class="main boxw" id="addaddress" style="display:none;">
  <div class="form">
   <form id="addForm">
    <p><input type="text" class="n1 required" name="alias" placeholder='设置一个地址名称，如“家里、公司"' ></p>
    <p id="regions">
     <input type="hidden" id="regionId" name="region.regionId" value="${address.region.regionId}"/>
     <input type="hidden" id="regionName" name="regionName" value="${address.regionName}"/>
    </p>
    <p><input type="text" class="n3 required" name="street" placeholder="街道地址（具体到门牌号）" ></p>
    <p><input type="text" class="n3" name="postalCode" placeholder="邮编" ></p>
    <p><input type="text" class="n2 required" name="consignee" placeholder="收货人" ></p>
    <p><input type="text" class="n3 required" name="mobile" placeholder="手机号码" ></p>
    <p><input type="text" class="n3" name="tel" placeholder="座机号码" ></p>
    <p class="f_clear" >
     <input type="hidden" id="isDefault" name="isDefault" value=""/>
     <a name="checkWeek" class="checkbox check" id="setDefault"></a>
     <span>设为默认地址</span>
    </p>
    <p><a href="javascript:;" onclick="$('#addForm').trigger('validate');" class="btn">提 交</a></p>
   </form>
  </div>
</div>
<!-- 新增收货人信息end -->
<script src="${st.resDomain}/scripts/jquery-1.9.1.min.js"></script>
<script src="${st.resDomain}/scripts/com.js"></script>
<script src="${st.resDomain}/scripts/region.js" type="text/javascript"></script>
<script type="text/javascript">

(function(){
	var money = 0;
	// 各个店铺商品的小计
	$("[id^='cart_']").each(function(){
		var storeId = $(this).attr("id").split("_")[1];
		var sgExtens = 0;
		$("[id^='shopping_data_" + storeId + "_']").each(function(){
			var datas = $.trim($(this).html()).split("|");
			var sgMoney = parseFloat(datas[1]) * parseFloat(datas[2]);
			if (datas[5] != "" && datas[5] != datas[4]) {
				sgMoney = parseFloat(datas[1]) * parseFloat(datas[6]) * parseFloat(datas[2]);
			} 
			sgExtens += sgMoney;
		});
		money += sgExtens;
		$("#sgExtens_" + storeId).html(sgExtens.toFixed(1) + "0");	// 小数计算四舍五入保留一位小数
		
		// 支付方式默认选中“货到付款”
		var payT_catId = 222;
		$("#payT_" + storeId + "_" + payT_catId).addClass("check");
		
		// 配送方式默认选中“送货上门”
		var del_catId = 223;
		$("#del_" + storeId + "_" + del_catId).addClass("check");
	});
	$("#totalMoney").html(money.toFixed(1) + "0");
})();

	//事件：选择支付方式
	$("[id^='payT_']").click(function(){
		$("[id^='payT_']").removeClass("check");
		$(this).toggleClass("check");
	});

	// 事件：选择配送方式
	$("[id^='del_']").click(function() {
		$("[id^='del_']").removeClass("check");
		$(this).toggleClass("check");
	});
	
	// 备注
	$("textarea").focus(function() {
		$(this).css("height", "5rem");
	});
	$("textarea").blur(function() {
		$(this).css("height", "2rem");
	});
	
	// 事件：提交订单
	$("#orderAddDoBt").click(function() {
		var addressId = $("#addressId").val();
		if (!addressId) {
			showMsg("您还没有填写收货人信息哦!", 'error');
			return;
		}
		$("[id^='cart_']").each(function(){
			var storeId = $(this).attr("id").split("_")[1];
			$("[id^='payT_" + storeId + "_'].check").each(function(){
				var payId = $(this).attr("id").split("_")[2];
				$("#pay_" + storeId).val(payId);
			});
			$("[id^='del_" + storeId + "_'].check").each(function(){
				var expressId = $(this).attr("id").split("_")[2];
				$("#delivery_" + storeId).val(expressId);
			});
		});
		
		$("#add_form").submit();
	});
	
	/* 创建收货人信息 */
	// 保存收货地址请求地址
	var saveAddressPath = g_userDomain + "/address/addOrEditDo/json";
	var $addForm = $("#addForm");
	
	$("#addAddressBt").click(function() {
		$("#order").hide();
		$(".tj").hide();
		$("#headerbox span").html("新增收货人信息");
		$("#addaddress").show();
	});
	
	// 加载地区并生成下拉列表
	$("#regions").regionsSelect({
		value: $("#regionId").val(), 
		onLoad: function($select) {
			$select.attr("data-rule","地区: required;");
			$select.addClass("required");
			$select.css({width: "48%",float: "left","margin-right": "1%"});
		},
		onSelect: function($select) {
			$("#regionId").val($select.val());
			var regionName = $("[id^='selectRegion_'] option:selected").map(function(){
				return $(this).text();
			}).get().join("");
			$("#regionName").val(regionName);
		}
	});
	
	// 表单验证和提交
	mxz.pluginLoader.load("validator",init);
	function init(){
		$addForm.validator({
			rules: {
				hasHomeNum: function(element) {
					return $(element).val().indexOf("栋") >= 0 || $(element).val().indexOf("号") >= 0;
				}
			},
			 messages: {
				 hasHomeNum: "{0}应包含楼号房号"
			 },
			fields: {
				alias: "地址名称: required; length[~50]",
				street: "街道: required; length[~100]; hasHomeNum",
				postalCode: "postcode",
				consignee: "收货人: required; length[2~20]",
				mobile: "手机号码: required; mobile",
				tel: "tel"
			},
			valid: function(form){
				// 自动设为默认地址
				$("#isDefault").val(true);
				
				showMsg("正在保存...", "load");
				var me = this;
				me.holdSubmit();
				$.post(saveAddressPath, $(form).serialize(), function(data){
					if (data.status === 0) {
						me.holdSubmit(false);
						showMsg(data.message, 'pass');
						setTimeout(function() {
							var address = data.result;
							$("#addaddress").hide();
							$("#headerbox span").html("填写订单");
							$("#order").show();
							$(".tj").show();
							$("#defAddress").html("<h2>收货人信息</h2><h3>" + address.consignee + "</h3><p>" + address.mobile + "</p><p>" + address.regionName + address.street + "</p>");
							$("#addressId").val(address.addressId);
						}, 1500);
					} else {
						showMsg(data.message, 'error');
					}
				});
			}
		});
	}
</script>
</body>
</html>
